<template>
  <div id="app">
    <router-view />
  </div>
</template>


<script>
export default {
  created() {
    this.getLocation();
  },
  methods: {
    getLocation() {
      //浏览器定位
      const self = this; //否则this指向高德地图
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
          buttonOffset: new AMap.Pixel(10, 20),
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: true,
          //  定位按钮的排放位置,  RB表示右下
          buttonPosition: "RB",
        });

        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, "complete", onComplete); //监听
        AMap.event.addListener(geolocation, "error", onError);

        function onComplete(data) {
          // data是具体的定位信息
          console.log("定位成功");
          // 将数据保存到vuex中
          self.$store.dispatch("setLocation", data);
            self.$store.dispatch("setAddress",data.formattedAddress);
                console.log("定位成功");  
        }

        function onError(data) {
          // 定位出错
          console.log("定位失败");

          self.getLngLatLocation();
        }
      });
    },
    //采用经纬度定位
    getLngLatLocation() {
      const self = this;
      // Ip定位当前城市信息
      AMap.plugin("AMap.CitySearch", function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            //逆地理编码：经纬度-->地址
            AMap.plugin("AMap.Geocoder", function () {
              var geocoder = new AMap.Geocoder({
                // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                city: result.adcode,
              });
              //获取经纬度信息
              var lnglat = result.rectangle.split(";")[0].split(",");

              geocoder.getAddress(lnglat, function (status, data) {
                if (status === "complete" && result.info === "OK") {
                  // result为对应的地理位置详细信息
                  self.$store.dispatch('setLocation',{
                    addressComponent:{
                      city:result.city,
                      province:result.province
                    },
                    formattedAddress:data.regeocode,formattedAddress
                  })
                     self.$store.dispatch('setAddress',data.regeocode.formattedAddress)
                  console.log("定位已完成");  
                }
              });
            });
          }
        });
      });
    },
  },
};
</script>

<style lang="scss">
#app {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  ul, ol{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    
  }
}
</style>



